<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <style>
        /*router-link-active为 reouter-link 默认点击后的类名 */
        /* myclass 是自定义类名 */
    .router-link-active, .myclass{
        color: red;
        font-weight: 800;
        font-style: initial;
        font-size: 80px;
        text-decoration: underline;
        background-color: green;
    }

        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(140px);
        }
        .v-enter-active, .v-leave-active {
            transition: all 0.5s ease;
        }

    </style>
</head>
<body>
    <div id="app">
        <!-- router-link 默认渲染为 a 标签 -->
        <!-- tag，可以让其渲染为其它标准 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>


        <transition mode="out-in">

            <!-- Vue-router 提供的Vue元素，专门用于点位符 -->
            <!--将来route匹配的组件，都会展示在里面-->
            <router-view></router-view>
        </transition>
    </div>

    <script>

        // 登录组件
        var login = {
            template: `<h1>登录组件</h1>`
        }

        var register = {
            template: `<h1>注册组件</h1>`
        }
        //Vue.component('login', login);

        // 创建路由对象，可以为构造函数传入配置对象
        var routerObj = new VueRouter({
            routes:[
                // 路由匹配规则, 每个路由规则都是一个对象
                // 属性1 path: 监听哪个路由地址
                // 属性2 component， 表示如果路由匹配的 path，则展示 component属性对应的组件
                {path: '/login', component: login},  // component必需是对象，不能是引用名称
                {path: '/register', component: register},
                {path: '/', redirect: '/login'}  // 重定向
            ],
            linkActiveClass: 'myclass', // 自定义class名称
        });

    
        var vm = new Vue({
            el: '#app',
            data:{},
            methods:{

            },
            // 把路由对象注册到vm实例上，用来监听URL地址变化，然后展示对应的组件
            router: routerObj
        });
    </script>
</body>
</html>